<template>
    <div class="bi-picture" :class="classList" :style="styleList">
        <img :src="image(src)"  :class="imageClass" /> 
    </div>
</template>


<script>
export default{
    props:{
        src:{
            type:String,
            default:''
        },
        width:{
            type:[String,Number],
            default:'100'
        },
        height:{
            type:[String,Number],
            default:'100'
        },
        type:{
            type:String,
            default:'cover'
        },
        //圆形
        circle:{
            type:Boolean,
            default:false
        },
        //圆角
        radius:{
            type:Boolean,
            default:false
        },
        //边框
        border:{
            type:Boolean,
            default:false
        },
        upload:{
            type:Boolean,
            default:false
        }
    },
    computed:{
        classList(){
            let list  = [];

            if (this.circle) list.push('circle');
            if (this.radius) list.push('radius');
            if (this.border) list.push('border');
            
            return list;

        },
        imageClass(){
            let list = [];

            if (this.type) list.push(this.type);

            return list;
        },
        styleList(){
            let list = {};

            if (this.width) list.width = parseInt(this.width) + 'px' ;
            if (this.height) list.height = parseInt(this.height) + 'px' ;
            return list;
        }
    },
    methods:{
        image(src){

            if (this.upload){

                let skip = ['http://','https://','data:','#','javascript'];
                
                for(var i=0;i<skip.length;i++){
                    if (src.indexOf(skip[i]) == 0){
                        return src;
                    }
                }

                if (typeof window.__bi_upload_url == 'function'){
                    return window.__bi_upload_url(src);
                }
            }else{
                return src;
            }
        }
    }
}
</script>


<style>
.bi-picture{
    position: relative;
    overflow: hidden;
}

.bi-picture img{
    width: 100%;
    height: 100%;
}

.bi-picture.circle{
    border-radius:50%;
}

.bi-picture.circle img{
    border-radius:50%;
}

.bi-picture.radius{
    border-radius:5px;
}

.bi-picture.radius img{
    border-radius:5px;
}

.bi-picture.border{
   padding:1px;
}

.bi-picture .cover{
    object-fit: cover;
}

.bi-picture .contain{
    object-fit: contain;
}

.bi-picture .fill{
    object-fit: fill;
}
</style>
